<script lang="ts" setup>
import { reactive } from 'vue'
import { getAlbumInfo } from '@/api/artist'
import { useRoute } from 'vue-router'
import type { AlbumSong, Album } from '@/types/artist'
import Info from './components/Info.vue'
import Song from './components/Song.vue'

const route = useRoute()

const state = reactive({
  haveMore: false,
  isLoading: false,
  album: {} as Album,
  songs: [] as AlbumSong[],
  activeName: 'song',
})

const getAlbum = async () => {
  const { data } = await getAlbumInfo(route.query.id as unknown as number)
  if (data.code !== 200) return ElMessage.error('获取失败')
  const { album, songs } = data
  state.album = album
  state.songs = songs
}
getAlbum()
</script>

<template>
  <div class="album">
    <Info :info="state.album" />
    <el-tabs v-model="state.activeName" class="demo-tabs">
      <el-tab-pane lazy :label="`歌曲 ${state.songs.length}`" name="song">
        <Song :song="state.songs" />
      </el-tab-pane>
      <el-tab-pane lazy label="详情" name="detail">
        <div class="text-xs text-slate-500 leading-7 detail" v-html="state.album.description"></div>
      </el-tab-pane>
      <el-tab-pane lazy label="评论" name="comment"> 你看啥</el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="less" scoped>
.album {
  :deep(.el-tabs__nav-wrap::after) {
    height: 0;
  }
}
.detail {
  white-space: pre-wrap !important;
}
</style>
